<template>
  <div 
    class="custom-node"
    :class="{ selected: selected }"
    @click="$emit('click')"
  >
    <el-icon><component :is="data.icon"/></el-icon>
    <span class="label">{{ data.name }}</span>
  </div>
</template>

<script setup>
defineProps({
  id: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style scoped>
.custom-node {
  padding: 10px;
  border-radius: 5px;
  background: white;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-node.selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.2);
}

.label {
  margin-left: 8px;
}
</style> 